<template>
    <div class="register_page">
        <font class="page_title">淘书<font class="page_title_small">用户注册</font></font>
        <Steps class="steps" :current="0">
            <Step title="进行邮箱验证"></Step>
            <Step title="绑定银行卡"></Step>
            <Step title="设置用户信息"></Step>
            <Step title="注册成功"></Step>
        </Steps>
        <div class="dividing_line"></div>
        <div class="user_box">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：
            <Input v-model="userId" :maxlength="number" size="large" clearable placeholder="用来唯一识别您的身份" class="input_box"/>
        </div>
        <div class="drag_box">
            验&nbsp;&nbsp;&nbsp;&nbsp;证：&nbsp;
            <div style="width:300px"><drag @checkSuccess='checkSuccess'></drag></div>
        </div>
        <Button @click="nextStep()" :disabled='!isCheck' class="check_btn" type="error" long>下一步</Button>
        <my-footer></my-footer>
    </div>
</template>
<script>
import drag from '../../components/drag'
import myFooter from '../../components/footer'

export default {
    components:{ drag, myFooter },
    data() {
        return {
            userId: '',
            number: 30,
            isCheck: false,
        }
    },
    methods: {
        nextStep() {
            if(this.checkMail()) {
                this.$router.push({
                    path: '/bindingBankCard',
                    query: {
                        userId: this.userId
                    }    
                });
            }
        },
        checkSuccess() {
            this.isCheck = true;
        },
        checkMail() {
            if(!/^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$/.test(this.userId)) {
                this.$Message.error("邮箱有误，请重新输入！");
                return false;
            }
            return true;
        }
    },
}
</script>

<style scoped>
.register_page{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page_title{
    position: fixed;
    font-size: 45px;
    font-weight: 800;
    font-family: cursive;
    color: rgb(252, 23, 23);
    top: 50px;
    left: 200px;
}
.page_title_small{
    margin-left: 7px;
    font-size: 25px;
    color: black;
    font-weight: 300;
    font-family: Arial, Helvetica, sans-serif;
}
.steps{
    width: 1600px;
    margin-left: 320px;
    margin-top: 180px;
}
.dividing_line{
    margin-top: 2vh;
    height: 1px;
    width: 100%;
    border-top: 2px solid rgb(250, 149, 67);
    margin-bottom: 40px;
}
.user_box{
    margin-top: 124px;
    font-size: 20px;
}
.input_box{
    width: 400px;
}
.drag_box{
    margin-top: 40px;
    font-size: 20px;
    width: 487.8px;
    display: flex;
}
.check_btn{
    margin-top: 40px;
    margin-left: -114px;
    width: 200px;
    height: 36px;
}
</style>
